require('../css/commCss/normalize.css')
require('../css/commCss/reset.css')
require('../css/commCss/property.css')
require('../css/commCss/basic.css')

// 字体
require('../libs/fonts/iconfont.css')

require('../css/myData.less')

//axios请求
const axios = require('axios')

//echarts图表
const echearts = require('echarts')

// weui-插件库
require('weui')
const weui = require('weui.js')


// 文档加载事件
document.addEventListener('DOMContentLoaded',function(){

    /**
     * 0.获取元素
     */
    let chart1 = document.querySelector('#chart1')
    let chart2 = document.querySelector('#chart2')
    let chart3 = document.querySelector('#chart3')
    let chart4 = document.querySelector('#chart4')
        
    /**
     * 1.返回
     */
     document.querySelector('#return').addEventListener('click',function(){
        history.go(-1)
    })


    /**
     * 2.获取运动数据
     */
    let userId = localStorage.userId
    // console.log(localStorage.userId);

    axios.get('http://139.9.177.51:8099/users/mysportsBadge?userId='+ userId)
        .then(function(res){
            // console.log(res.data);
            let data = res.data.data
            // console.log(data);
            // console.log(data.user);
            // console.log(data.sports);
            //头像 
            if(data.user.imgurl){
                document.querySelector('#imgurl').src = data.user.imgurl
            }else{
                location.href = './myUser.html'
            }
            
        })



    /**
    * 3.echarts图表
    */
    window.addEventListener('load',function(){

        //条形图
        let xAxis = ['2-13', '2-13', '2-13', '2-13', '2-13', '2-13', '2-13'];
        let yAxis = [50, 30, 100, 120, 70, 80, 60];

        barChart(xAxis,yAxis)
        function barChart(x,y){
        //初始化
        let myEchart = echearts.init(chart1)
        //指定图表
        var option = {
            title: {
                text: '近七天运动时长',
            },
            xAxis: {
              type: 'category',
              data: x
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: y,
                type: 'bar',
                itemStyle:{
                    normal:{
                        color:'#83A7D1'
                    }
                }
              }
            ]
        };
        //使用图表
        myEchart.setOption(option)
        }


        //饼状图
        pieChart()
        function pieChart(){
        //初始化
        let myEchart = echearts.init(chart2)
        //指定图表
        var option = {
            //标题
            title: {
              text: '运动分类'
            },
            //提示框组件
            tooltip: {
              trigger: 'item'
            },
            //图例组件
            legend: {
              orient: 'vertical',
              left: 'left',
              top:'middle',
              icon:'rect',
              itemHeight:10,
              itemWidth:10
            },
            series: [
              {
                  label:{
                    position:"inside",
                    formatter: "{d}%"
                  },
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 1048, name: '跑步' ,itemStyle: {color:"#736171"}},
                  { value: 735, name: '骑行' ,itemStyle: {color:"#ee5c43"}},
                  { value: 580, name: '训练' ,itemStyle: {color:"#58bb92"}}
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
        //使用图表
        myEchart.setOption(option)
        }


        //堆叠条形图
        shBerChart()
        function shBerChart(){
        //初始化
        let myEchart = echearts.init(chart3)
        //指定图表
        var option = {
            //标题
            title: {
                text: '近七日运动分类'
              },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
              }
            },
            legend: {
                orient: 'vertical' , 
                left:'right',
                top:'middle', 
                icon:'rect',
                itemHeight:10,
                itemWidth:10,
                align: 'left'
            },
            grid: {
              left: '0%',
              right: '20%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value'
            },
            yAxis: {
              type: 'category',
              data: ['2-13', '2-13', '2-13', '2-13', '2-13', '2-13', '2-13']
            },
            series: [
              {
                name: '跑步',
                type: 'bar',
                stack: 'total',
                label: {
                  show: false
                },
                emphasis: {
                  focus: 'series'
                },
                data: [100, 80, 120, 64, 110, 30, 70]
              },
              {
                name: '骑行',
                type: 'bar',
                stack: 'total',
                label: {
                  show: false
                },
                emphasis: {
                  focus: 'series'
                },
                data: [120, 112, 101, 134, 90, 230, 210]
              },
              {
                name: '训练',
                type: 'bar',
                stack: 'total',
                label: {
                  show: false
                },
                emphasis: {
                  focus: 'series'
                },
                data: [120, 182, 161, 234, 190, 130, 210]
              }
            ]
          }; 
        //使用图表
        myEchart.setOption(option)
        }


        //折线图
        lineChart()
        function lineChart(){
        //初始化
        let myEchart = echearts.init(chart4)
        //指定图表
        var option = {
            //标题
            title: {
                text: '近7日训练次数'
              },
            xAxis: {
              type: 'category',
              data: ['2-13', '2-13', '2-13', '2-13', '2-13', '2-13', '2-13']
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [8,5,10,6,3,8],
                type: 'line',
                symbol:'none'
              }
            ]
          }; 
        //使用图表
        myEchart.setOption(option)
        }


    })

    
    
})

